<template>
  <div class="edit">
    <div style="margin-bottom:10px">
      <nav-bar :userInfo="userInfo"></nav-bar>
    </div>

    <div class="uploadfile">
      <van-uploader class="uploading" :after-read="afterRead" preview-size="100vw"> </van-uploader>
      <edit-list left="头像">
        <img v-if="userInfo.user_img" :src="userInfo.user_img" alt slot="right" />
        <img v-else src="../assets/default_img.jpg" alt slot="right" />
      </edit-list>
    </div>

    <edit-list left="昵称" @editclick="editNameDialogShow = true">
      <a href="javascript:;" slot="right">
        {{ userInfo.name }}
      </a>
    </edit-list>
    <edit-list left="账号">
      <a href="javascript:;" slot="right">
        {{ userInfo.username }}
      </a>
    </edit-list>
    <edit-list left="性别" @editclick="editGenderShow = true">
      <a href="javascript:;" slot="right">
        {{ userInfo.gender == 1 ? '男' : '女' }}
      </a>
    </edit-list>
    <edit-list left="个性签名" @editclick="editDescDialogShow = true">
      <a href="javascript:;" slot="right">
        {{ userInfo.user_desc }}
      </a>
    </edit-list>

    <button @click="$router.push('/userinfo')" class="backbtn">返回个人中心</button>

    <!-- 修改昵称的弹出框 -->
    <van-dialog v-model="editNameDialogShow" @confirm="nameConfirm()" @cancel="text = ''" title="修改昵称" show-cancel-button>
      <van-field v-model="text" autofocus />
    </van-dialog>

    <!-- 修改性别的弹出框 -->
    <van-action-sheet v-model="editGenderShow" cancel-text="取消" :actions="actions" @select="onGenderSelect" />

    <!-- 修改个性签名的弹出框 -->
    <van-dialog v-model="editDescDialogShow" @confirm="descConfirm()" @cancel="text = ''" title="个性签名" show-cancel-button>
      <van-field rows="1" autosize type="textarea" v-model="text" autofocus />
    </van-dialog>
  </div>
</template>

<script>
import NavBar from '@/components/common/NavBar'
import EditList from '@/components/common/EditList'

export default {
  data() {
    return {
      userInfo: {},
      editNameDialogShow: false, //控制修改昵称弹出框的显示与隐藏
      editDescDialogShow: false, //控制修改个性签名弹出框的显示与隐藏
      editGenderShow: false, //控制编辑性别对话框的显示与隐藏
      text: '',
      actions: [
        { name: '男', value: 1 },
        { name: '女', value: 0 }
      ]
    }
  },
  components: {
    NavBar,
    EditList
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    async getUserInfo() {
      const id = window.sessionStorage.getItem('id')
      const res = await this.$axios.get('/user/' + id)
      //   console.log(res)
      this.userInfo = res.data[0]
    },
    async afterRead(file) {
      // 此时可以自行将文件上传至服务器
      //   console.log(file)
      const formdata = new FormData()
      formdata.append('file', file.file)
      const res = await this.$axios.post('/upload', formdata)
      //   console.log(res)
      this.userInfo.user_img = res.data.url
      this.saveUpdate()
    },
    // 存储修改的信息
    async saveUpdate() {
      const id = window.sessionStorage.getItem('id')
      const res = await this.$axios.post('/update/' + id, this.userInfo)
      if (res.data.code != 200) {
        return this.$toast.fail(res.data.msg)
      }
      this.$toast.success('修改成功')
      //   console.log(res)
    },
    // 点击修改昵称的确认按钮时触发
    nameConfirm() {
      this.userInfo.name = this.text
      this.saveUpdate()
      this.text = ''
    },
    // 点击修改个性签名的确认按钮时触发
    descConfirm() {
      this.userInfo.user_desc = this.text
      this.saveUpdate()
      this.text = ''
    },
    //当选择性别时触发
    onGenderSelect(data) {
      //   console.log(data)
      this.userInfo.gender = data.value
      this.saveUpdate()
      this.text = ''
      this.editGenderShow = false
    }
  }
}
</script>

<style lang="stylus" scoped>

.edit img{
    width 12.778vw
    height 12.778vw
    border-radius 50%
}
.edit a{
    color #999999
}
.uploadfile{
    position relative
    overflow hidden
}
.uploading{
    position absolute
    opacity 0
}
.backbtn{
    background: #fff;
    width: 100%;
    height: 12.5vw;
    color #505050
    border-radius: 1.067vw;
    font-size: 3.733vw;
    margin: 5vw 0;
}
</style>
